<template>
    <view class="Ultramans">
        <view class="Ultramans_asd">
            <u-cell-group>
                <u-cell title="地址"
                    :value='reslist.provinceName+reslist.cityName+reslist.regionName+reslist.address'></u-cell>
                <u-cell title="联系方式" :value="reslist.phone"></u-cell>
                <u-cell title="上门时间" :value="reslist.visitTime"></u-cell>
                <u-cell title="回收品类" :value="reslist.categoryName"></u-cell>
                <u-cell title="平台费用" :value="reslist.type==1?reslist.rate+'%':reslist.serviceFee"></u-cell>
                <view class="Ultramans_input">
                    <view class="">
                        <text style="color: red;">*</text>
                        回收金额
                    </view>
                    <view class="Ultramans_input_i" v-if="reslist.type == 1">
                        <u--input placeholder="请输入内容" style="width: 100px;" border="surround" v-model="value"
                            @change="change"></u--input>元
                    </view>
                </view>
            </u-cell-group>
        </view>
        <view class="Ultramans_zf">
            <view class="Ultramans_zf_je">
                <text style="font-size: 14px;color: #9e9e9e;">总计：</text>
                <text style="font-size: 14px;color: #fa4443;"
                    v-if="reslist.type == 1">￥{{jine?formatDecimal(jine, 2):0}}</text>
                <text style="font-size: 14px;color: #fa4443;" v-if="reslist.type == 2">￥{{reslist.serviceFee}}</text>
            </view>
            <view class="Ultramans_zf_z" @click="zhifu">
                支付
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                value: '',
                jine: '',
                reslist: {},
                as: '',
                fuwuf:'',
                klokj:''

            }
        },
        onLoad(id) {
            this.$ajax('get', 'recovery/appointment_order/' + id.id).then((res) => {
                this.reslist = res.data
                console.log(this.reslist.rate / 100);

            })
        },
        methods: {
            change(e) {
                this.jine = Number(e) + e * this.reslist.rate / 100
                this.klokj = Number(e)
                this.fuwuf = e * this.reslist.rate / 100
            },
            zhifu() {
                if (this.value == '') {
                    uni.showToast({
                        title: '请输入金额',
                        icon: 'none'
                    });
                    return
                } else {
                    uni.navigateTo({
                        url: '../index/paymentss?je=' + this.jine + '&id=' + this.reslist.id + '&fuwf=' + this.fuwuf + '&jinesa=' + this.klokj
                    })
                }
            },
            formatDecimal(num, decimalPlaces) {
                return parseFloat(num.toFixed(decimalPlaces));
            }
        }
    }
</script>

<style scoped>
    page {
        background-color: #f6f6f6;
    }

    .Ultramans_input {
        padding: 10px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .Ultramans_input_i {
        display: flex;
        align-items: center;
    }

    .Ultramans {
        width: 100%;
        position: absolute;
    }

    .Ultramans_asd {
        width: 95%;
        margin: 10px auto;
        background-color: #fff;
        border-radius: 15px;
    }

    /deep/.u-cell__body {
        padding: 16px 15px !important;
    }

    /deep/.u-cell__title-text {
        font-size: 17px !important;
    }

    .Ultramans_zf {
        width: 100%;
        display: flex;
        position: fixed;
        bottom: 0;
        border-top: 1px solid #f6f6f6;
        align-items: center;
        justify-content: space-between;
    }

    .Ultramans_zf_je {
        margin-left: 30px;
    }

    .Ultramans_zf_z {
        width: 100px;
        height: 50px;
        background-image: linear-gradient(to right, #ff9898, #ff6463);
        text-align: center;
        line-height: 50px;
    }
</style>